<template>
  <div>
    <template v-if="List3 && List3.medicalDetailMap">
      <table
        border="1"
        cellspacing="0"
        cellpadding="0"
        align="center"
        bordercolor="#ccc"
        v-loading="loading"
        style="border-collapse: collapse; float: left"
      >
        <tr>
          <td
            style="
              width: 190px;
              height: 50px;
              padding: 0 5px;
              box-sizing: border-box;
            "
            id="lineTd"
            v-if="List3 && List3.medicalDetailMap"
          >
            <span style="float: left; margin-top: 5px">药物</span>
            <span style="float: right; margin-top: -3px">入院时间</span>
          </td>
          <td
            align="center"
            v-for="(item, index) in List3.inHospitalDays"
            :key="index + 'g'"
            width="45"
            height="50"
          >
            D{{ index + 1 }}
          </td>
        </tr>
        <tr
          height="40"
          v-for="(value, key, index) in List3.medicalDetailMap"
          :key="index + 'f'"
        >
          <td
            align="center"
            width="190"
            :style="'background-color:' + value[0].color + ';'"
          >
            {{ key ? key.split("~")[0] : key }}
          </td>
          <template v-if="value[0].beginDay !== 1">
            <td
              align="center"
              width="45"
              v-for="(item, index) in value[0].beginDay - 1"
              :key="index + 'a'"
            ></td>
          </template>
          <template v-if="value.length == 1">
            <td
              align="center"
              width="45"
              v-for="(item, index) in value"
              :key="index + 'b'"
              :colspan="item.endDay - item.beginDay + 1"
              style="background-color: #1292b9"
            >
              {{ item.usageAndDosage }}
            </td>
          </template>
          <template v-else>
            <template v-for="(item, index) in value">
              <td
                v-if="shouldRender(index, value)"
                :key="index + 'c'"
                align="center"
                width="45"
                :colspan="item.beginDay ? item.endDay - item.beginDay + 1 : ''"
                :style="item.beginDay ? 'background-color: #1292b9' : ''"
              >
                {{ item.usageAndDosage }}
              </td>
              <template v-if="item.time && item.time !== 0 && item.time > 0">
                <td
                  align="center"
                  width="45"
                  v-for="(item, index) in item.time"
                  :key="index"
                ></td>
              </template>
            </template>
          </template>
          <template
            v-if="List3.inHospitalDays - value[value.length - 1].endDay > 0"
          >
            <td
              align="center"
              width="45"
              v-for="(item, index) in List3.inHospitalDays -
              value[value.length - 1].endDay"
              :key="index + 'e'"
            ></td>
          </template>
        </tr>
      </table>
    </template>
    <div v-else>
      <el-empty :image-size="150" description="暂无用药数据"></el-empty>
    </div>
  </div>
</template>

<script>
import { parseTime, getJetLag } from "@/utils/ruoyi.js";
import { shaft } from "@/api/workstation/baseInfo.js";
export default {
  name: "yongyaoshijianzhou",
  data() {
    return {
      loading: false,
    };
  },
  props: ["List3"],
  created() {
    // this.getList3();
  },
  methods: {
    shouldRender(index, value) {
      // 如果当前项为最后一项，则直接渲染
      if (index == value.length - 1) {
        return true;
      }
      // 判断当前项和下一项中的 开始日期与结束日期 是否全部相同
      return (
        value[index]?.beginDay !== value[index + 1]?.beginDay &&
        value[index]?.endDay !== value[index + 1]?.endDay
      );
    },
  },
};
</script>

<style lang="scss" scoped>
#lineTd {
  background: #fff
    url()
    no-repeat 100% center;
}
</style>
